Hierarchy in UX design UX 資訊層級
什麼是層級？
層級是透過調整元素的視覺表現（如大小、顏色、位置）來表達資訊重要性的順序。它的目標是引導使用者在頁面上從最重要的內容開始瀏覽，逐步過渡到次要內容。
層級 ≠ 強調，但密切相關
| 視覺設計原則 | 目的 | 舉例 |
|---|---|---|
| 強調（Emphasis） | 讓一個元素脫穎而出 | “立即預訂”按鈕被高亮為橙色 |
| 層級（Hierarchy） | 組織一組元素，讓使用者依照重要性依次閱讀 | 頁面標題最大，副標題居中，正文最小 |
如何在設計中體現層級？
1.字型大小
- 頁面標題最大，如：“選擇遛狗員”
- 說明性文字中等，如：“以下是根據您選擇的時間可預約的人員”
- 詳細資訊最小，如遛狗員的描述或評價
2.顏色/明暗對比
- 使用深色文字突出關鍵內容（如遛狗員姓名）
- 使用淺灰色呈現輔助性內容
3.位置順序
- 把關鍵資訊放在頁面的上方
- 用視覺引導讓使用者從頂部開始，自然往下瀏覽
案例回顧：Dog Walker App
- 頁面頂部有三個步驟圖示，表示使用者流程（如 1/3 步驟）
- “選擇遛狗員” 是最大的文字，作為視覺錨點，引導閱讀起點
- “可預約時段說明” 放在次級位置，但仍大於細節資訊
- 每位遛狗員的名字加粗、深色處理，其他資訊如評價、時間等較淺且字型更小
這種層級組織幫助使用者快速瀏覽並做出選擇，同時減少認知負擔。
層級與可訪問性（Accessibility）
你可以透過在 wireframe/mockup 中新增可訪問性註解（accessibility annotations），讓螢幕閱讀器等工具按順序讀取內容。這樣做可以確保：
- 視覺順序 = 語義順序
- 所有使用者都能理解介面內容的主次關係
